<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<title>progressbar</title>
			<script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
			<script type="text/javascript" src="../../js/jquery/jquery.js">
            </script>
            <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
            </script>
            <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
            </script>
			<script type="text/javascript" src="../../js/jquery.bgiframe.js">
            </script>
            <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/progressbar/ctp.ui.progressbar.js">
            </script>
		    
			
			<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
			<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
			<link href="../../css/progressbar.css" rel="stylesheet" type="text/css"/>
			<script>
				var pro1;
				//$(window).load(function(){
				$(document).ready(	
					function(){
						new ctp.ui.panel({
							title: 'progressbar实例',
							collapsible: true,
							width: '1000px',
							height: '600px',
							renderTo: 'container',
							html:'tooltipDiv'
						});
						pro1 = new ctp.ui.progressbar({
							style:1,
							isVisible: true,
							borHeight:'12px',
							width:'200%',
							barWidth:'20%',
							barBackground:'#80A0E3',
							barImageType:0,
							boolBarImage:false,
							txWaiting:'Waiting...',
							statusVisible:'false'
						});
					}
				);
				setWidthGoOn = function(type){
					pro1.goProcessOn({
						fromStep: $('#from').attr('value'),
						toStep: $('#to').attr('value'),
						period: $('#period').attr('value'),
						perStep: $('#step').attr('value') * 1
					});
				};
				goProcessIn = function(){
					pro1.goProcessIn({
						period: $('#period').attr('value'),
						perStep: $('#step').attr('value') * 1,
						opTime: $('#opTime').attr('value')*1
					});
				};
				stopProcess = function(){
					pro1.clearInterval();
				};
				setVisible = function(value){
					pro1.setVisible(value);
				};
				renderTo = function(){
					pro1.renderTo('aaa');
				}
				setBarWidth = function(){
					pro1.setWidth($('#value').attr('value'));
				}
				setWidth = function(){
					pro1.setWidth($('#value').attr('value'));
				}
				setBorHeight = function(){
					pro1.setBorHeight($('#value').attr('value'));
				}
				setBarBackground = function(){
					pro1.setBarBackground($('#value').attr('value'));
				}
				pro1go = function(){
					pro3 = new ctp.ui.progressbar({
						renderTo:'tooltipDiv',
						isVisible:false
					});
					pro3.addScreenLock(false);
					pro3.setCenter(false);
					pro3.setVisible(true);
					pro3.goProcessOn({
						fromStep:'0%',
						toStep: '30%',
						period: '100',
						perStep: 1
					});
					setTimeout(function(){
						pro3.clearInterval();
						pro3.goProcessOn({
							toStep: '70%',
							period: '100',
							perStep: 1
						});
						setTimeout(function(){
							pro3.clearInterval();
							pro3.goProcessOn({
								toStep: '100%',
								period: '100',
								perStep: 1
							});
							setTimeout(function(){
								pro3.clearInterval();
								pro3.setBarWidth('100%');
								setTimeout(function(){
									pro3.delScreenLock();
									pro3.remove();
								},1000)
							},4000)
						},4000)
					}
					,5000);
				}
			
			</script>
		</head>
		<body>
			<b>CTP.progressbar实例</b><hr /><br />
			<div id="container">
			</div>
			<div id="tooltipDiv">
			<div>
				<input id = "value" />
				<button onclick="renderTo();">装载进度条</button>
				<button onclick="pro1.remove();">销毁进度条</button>
				<button onclick="alert(pro1.getId());">获取进度条ID</button>
				<button onclick="alert(pro1.getDomId());">获取进度条DomID</button>
				<button onclick="setBarWidth();">设置进度条位移(%)</button>
				<button onclick="alert(pro1.getSettings().barWidth);">获取进度条位移</button>
				<button onclick="setVisible(true);">显示进度条</button>
				<button onclick="setVisible(false);">隐藏进度条</button>
				<button onclick="setWidth();">设置进度条长度(px)</button>
				<button onclick="alert(pro1.getSettings().width);">获取进度条长度</button>
				<button onclick="setBorHeight();">设置进度条高度(px)</button>
				<button onclick="alert(pro1.getSettings().borHeight);">获取进度条高度</button>
				<button onclick="setBarBackground();">设置进度条背景色</button>
				<button onclick="alert(pro1.getSettings().barBackground);">获取进度条背景色</button>
			</div>
			<div>
				周期：<input id = 'period' value='200' />
				起点(%)：<input id='from' value='0%' />
				终点(%)：<input id='to' value='100%' />
				步伐：<input id='step' value='1' />
				<button onclick="setWidthGoOn()">进度条运行</button>
				<br />
				运行周期：<input id='opTime' value='0' />
				<button onclick="goProcessIn()">进度条持续运行</button>
				<button onclick="stopProcess()">进度条停止运行</button>
				<br />
				<button onclick="pro1go()" style='color:blue'>进度条运行测试</button>
			</div>
			<div id='aaa' style='width:200px;height:20px;border:1px solid #ffffff'></div>
			</div>
			<div id='aaa' style='width:200px;height:2000px;border:1px solid #ffffff'></div>
		</body>
	</html>